<template>
  <div class="wrap">
    <van-address-list
      v-model="chosenAddressId"
      :list="list"
      :disabled-list="disabledList"
      disabled-text="以下地址超出配送范围"
      default-tag-text="默认"
      @add="onAdd"
      @edit="onEdit"
    />
  </div>
</template>

<script>
import {mapState} from "vuex"
import Vue from "vue";
import { Toast } from "vant";
import { AddressList } from "vant";
Vue.use(AddressList);
export default {
  data() {
    return {
      chosenAddressId: "1",
    
    };
  },
  computed:{
      ...mapState(["list","disabledList"])
  },
  methods: {
    onAdd() {
      Toast("新增地址");
      this.$router.push("/addaddress")
    },
    onEdit(item, index) {
        // 在vue中通过query传参如果传递得参数是一个对象得话，在刷新页面得情况下，可能会造成参数的丢失
         this.$router.push({
           name:"addaddress",
           query:{
             index: JSON.stringify(index), // 字符串得0转布尔值也是true，解决第一条无法编辑问题
             item :JSON.stringify(item) // 防止页面刷新报错
           }
         })
    },
  },
};
</script>

<style>
.wrap {
  width: 100%;
  height: 100%;
}
</style>